import { defineComponent, ref } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';

export default defineComponent({
  name: 'Collapse',
  props: {
    /** 左侧最小宽度 */
    minWidth: {
      type: Number,
      default: 300
    }
  },
  setup(props, { slots }) {
    const collapseContainer = ref(null);
    const resizeBar = ref(null);
    const {
      width,
      maxWidth,
      maxHeight,
      minExistWidth
    } = useModule(props, collapseContainer, resizeBar)
    return () => <div
      ref={collapseContainer}
      class={styles.collapseContainer}
    >
      <div
        class={styles.left}
        style={{
          height: maxHeight.value + 'px'
        }}
      >
        <div
          ref={resizeBar}
          class={styles.resizeBar}
          style={{
            '--min-width': props.minWidth + 'px',
            width: width.value + 'px'
          }}
        />
        <div class={styles.resizeLine} />
        <div
          class={styles.leftConatiner}
          style={{
            width: (width.value === props.minWidth ? props.minWidth : width.value) - 3 + 'px',
            display: `${width.value > minExistWidth.value ? 'revert-layer' : 'none'}`
          }}
        >
          {
            slots.left?.()
          }
        </div>
      </div>
      <div
        class={[styles.right, styles.rightContainer]}
        style={{
          display: `${width.value < (maxWidth.value - minExistWidth.value) ? 'revert-layer' : 'none'}`
        }}
      >
        {
          slots.right?.()
        }
      </div>
    </div>
  }
})
